<template>
  <div class="text">
    <div class="header">练习</div>
    <div class="item">
      <Grid>
        <GridItem v-for="(item,index) in msg" :key="index" :icon="item.icon" :text="item.name" />
      </Grid>
    </div>
    <div class="con">
      <p class="mokao">近期模考</p>
      <p class="sort"><span>默认排序</span><span>时间</span></p>
      <p class="imgp"><img src="https://wap.365msmk.com/img/empty@2x.a2fa524d.png" alt=""></p>
      <p class="finn">暂无模考安排，敬请期待</p>
    </div>
    <Drag/>
  </div>
</template>

<script>
import { Grid, GridItem } from "vant";
import Drag from "../../components/Drag";
export default {
  components: {
    Drag,
    Grid,
    GridItem,
  },
  data() {
    return {
      msg: [
        {
          name: "考点专练",
          icon:
            "",
          value: 1,
        },
        {
          name: "套卷练习",
          icon:
            "",
          value: 2,
        },
        {
          name: "仿真模考",
          icon:
            "",
          value: 3,
        },
        {
          name: "错题练习",
          icon:
            "",
          value: 4,
        },
        {
          name: "测评记录",
          icon:
            "",
          value: 5,
        },
        {
          name: "习题收藏",
          icon:
            "",
          value: 6,
        },
      ],
    };
  },
  mounted() {},
};
</script>

<style scoped>
.text {
  height:800px;
  background-color: #eeeeee;
}
.header {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  background-color: #fff;
}
.item {
  width: 95%;
  height: 200px;
  border-radius: 10px;
  background-color: #fff;
  margin: 10px auto;
  padding-top: 5px;
}
.con{
  width: 100%;
  height: 250px;
  background-color: #fff;
}
.mokao{
  color: #999;
  padding-top: 10px;
  padding-left: 10px;
  font-size: 16px;
}
.sort{
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
}
.imgp{
  width: 100px;
  height: 150px;
  margin: 0 auto;
}
.imgp>img{
  width:100%;
}
.finn{
  color: #999;
  text-align: center;
}
</style>